<template>
	<view class="mall-container">
		<Search>
			<template #content>
				<view class="nav">
					<view class="content">
						<view class="nav-item" @click="specialarea(6, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_jydq.png" mode="widthFix"></image>
							</view>
							<view class="text">
								家用电器
							</view>
						</view>
						<view class="nav-item" @click="specialarea(5, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_smcp.png" mode="widthFix"></image>
							</view>
							<view class="text">
								数码产品
							</view>
						</view>
						<view class="nav-item" @click="specialarea(6, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_qcyp.png" mode="widthFix"></image>
							</view>
							<view class="text">
								汽车用品
							</view>
						</view>
						<view class="nav-item" @click="specialarea(8, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_jpfs.png" mode="widthFix"></image>
							</view>
							<view class="text">
								精品服饰
							</view>
						</view>
						<view class="nav-item" @click="specialarea(9, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_mzhf.png" mode="widthFix"></image>
							</view>
							<view class="text">
								美妆护肤
							</view>
						</view>
						<view class="nav-item" @click="specialarea(9, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_jjyp.png" mode="widthFix"></image>
							</view>
							<view class="text">
								家具用品
							</view>
						</view>
						<view class="nav-item" @click="specialarea(11, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_rybh.png" mode="widthFix"></image>
							</view>
							<view class="text">
								日用百货
							</view>
						</view>
						<view class="nav-item" @click="specialarea(11, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_jsyl.png" mode="widthFix"></image>
							</view>
							<view class="text">
								饮料酒水
							</view>
						</view>
						<view class="nav-item" @click="specialarea(4, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_zbss.png" mode="widthFix"></image>
							</view>
							<view class="text">
								珠宝首饰
							</view>
						</view>
						<view class="nav-item" @click="specialarea(13, 2)">
							<view class="pic">
								<image src="@/static/icon/v1/mall_zh.png" mode="widthFix"></image>
							</view>
							<view class="text">
								综合
							</view>
						</view>
					</view>

				</view>
			</template>
		</Search>

		<GifPic></GifPic>

		<ProList></ProList>
	</view>
</template>

<script>
	import Search from '@/components/index/Search/Search.vue'
	import GifPic from '@/components/index/GifPic/GifPic.vue'
	import ProList from '@/components/index/ProductList/ProductList.vue'
	export default {
		components: {
			Search,
			GifPic,
			ProList
		},
		data() {
			return {

			}
		},
		methods: {
			specialarea(typeid, malltype) {
				uni.navigateTo({
					url: `/pages/specialarea/specialarea?typeid=${typeid}&malltype=${malltype}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mall-container {
		padding: 0 10rpx;


		.nav {
			position: absolute;
			left: 0;
			bottom: 0;
			padding: 10rpx;
			width: 100%;

			.content {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				padding: 20rpx 0;
				background-color: #fff;
				border-radius: 30rpx;

				.nav-item {
					width: 20%;
					margin-bottom: 10rpx;

					.pic {
						width: 60%;
						margin: 0 auto;

						image {
							width: 100%;
						}
					}

					.text {
						font-size: 24rpx;
						color: #5E5E5E;
						text-align: center;
					}

				}


			}
		}
	}
</style>
